
import React from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
import Taro from "@tarojs/taro";
import { connect } from "react-redux";

type TabProps = {
    tabList: Array<any>
    current: number,
    isShow?: Boolean
}

@(connect(({ globalData }) => {
    return { isShow: globalData.tabBarIsShow };
}) as any)
class TabBar extends React.PureComponent<TabProps, any>{
    constructor(props) {
        super(props);
        this.state = {
            updateCurrent: props.current
        };
    }

    switchTab(index: number) {
        this.setState({
            updateCurrent: index
        });
        Taro.redirectTo({ url: this.props.tabList[index].pagePath });
    }

    render() {
        const { tabList, isShow } = this.props;
        const { updateCurrent } = this.state;
        if (!isShow) return null;
        return (<View className="tabBar" style={{ height: 59 }}>
            {
                tabList.map((item, index) => {
                    return <View className="tabBar__item" onClick={this.switchTab.bind(this, index)} data-path={item.pagePath} key={index}>
                        <Text className={`iconfont ${updateCurrent === index ? "iconfont--actived" : ""}`}>{item.icon}</Text>
                        <View className={`tabBar__item__text ${updateCurrent === index ? "tabBar__item__text--actived" : ""}`} >
                            {item.text}
                        </View>
                    </View>;
                })
            }
        </View>);
    }
}

export default TabBar;

